<template>
  <div>
    <div :id="videoId" :style="styleObject"></div>
<!--    <el-button type="success" @click="realplay">播放</el-button>-->
  </div>
</template>

<script>
import { getGuid } from '@/utils'
export default {
  props: {
    videoUrl: { type: String, default: '' },
    width:{type: String, default:"1000px"},
    height:{type: String, default:"600px"},
  },
  data() {
    return {
      videoId: 'v' + getGuid(),
      player: null,
      splitNum: 1,
      styleObject:{
        width:this.width,
        height: this.height
      },
    }
  },
  computed: {
    mode: function () {
      return 0
    },
  },
  mounted() {
    this.createPlayer()
    this.init()
    setTimeout(()=>{
      this.realplay();
    },100)
  },
  beforeDestroy() {
    if(this.player) {
      this.player.JS_StopRealPlayAll();
      this.player = null;
    }
  },
  methods: {
    init() {
      // 设置播放容器的宽高并监听窗口大小变化
      const player = this.player;
      window.addEventListener('resize', () => {
        player.JS_Resize(1000,600)
      })
    },
    createPlayer() {
      this.player = new window.JSPlugin({
        szId: this.videoId,
        szBasePath: './h5player/',
        iMaxSplit: 2,
        iCurrentSplit: 1,
        openDebug: true,
        oStyle: {
          borderSelect: '#FFCC00',
        },
      })
      // 事件回调绑定
      this.player.JS_SetWindowControlCallback({
        windowEventSelect: function (iWndIndex) {
          //插件选中窗口回调
          console.log('windowSelect callback: ', iWndIndex)
        },
        pluginErrorHandler: function (iWndIndex, iErrorCode, oError) {
          //插件错误回调
          console.log('pluginError callback: ', iWndIndex, iErrorCode, oError)
        },
        windowEventOver: function (iWndIndex) {
          //鼠标移过回调
          //console.log(iWndIndex);
        },
        windowEventOut: function (iWndIndex) {
          //鼠标移出回调
          //console.log(iWndIndex);
        },
        windowEventUp: function (iWndIndex) {
          //鼠标mouseup事件回调
          //console.log(iWndIndex);
        },
        windowFullCcreenChange: function (bFull) {
          //全屏切换回调
          console.log('fullScreen callback: ', bFull)
        },
        firstFrameDisplay: function (iWndIndex, iWidth, iHeight) {
          //首帧显示回调
          console.log('firstFrame loaded callback: ', iWndIndex, iWidth, iHeight)
        },
        performanceLack: function () {
          //性能不足回调
          console.log('performanceLack callback: ')
        },
      })
    },
    realplay() {
      const { player, mode, videoUrl } = this
      const index = player.currentWindowIndex
      const playURL = videoUrl
      player.JS_Play(playURL, { playURL, mode }, index).then(
        () => {
          console.log('realplay success')
        },
        (e) => {
          console.error(e)
        }
      )
    },
  },
}
</script>
